<template> 
	<div class="app-container">
		<el-card class="filter-container" shadow="never">
			<div>
				<i class="el-icon-search"></i>
				<span>筛选搜索</span>
				<el-button style="float: right" @click="searchAdminSysNoticeList()" type="primary" size="small">
					查询结果
				</el-button>
			</div>
			<div style="margin-top: 15px">
				<el-form :inline="true" :model="listQuery" size="small" label-width="140px">
					<el-form-item label="输入搜索：">
						<el-input style="width: 203px" v-model="listQuery.noticeTitle" placeholder="标题名称/关键字"></el-input>
					</el-form-item>
				</el-form>
			</div>
		</el-card>
		<el-card class="operate-container" shadow="never">
			<i class="el-icon-tickets"></i>
			<span>数据列表</span>
			<el-button class="btn-add" @click="addAdminSysNotice()" size="mini">
				添加
			</el-button>
		</el-card>
		<div class="table-container">
			<!-- @selection-change="handleSelectionChange" -->
			<el-table ref="adminSysNoticeTable" :data="list" style="width: 100%" 
			 v-loading="listLoading" border>
				<!-- <el-table-column type="selection" width="60" align="center"></el-table-column> -->


				<el-table-column prop="noticeId" label="公告ID" align="center">
					<template slot-scope="scope">
						{{scope.row.noticeId }}
					</template>
				</el-table-column>
				<el-table-column prop="noticeTitle" label="标题" align="center">
					<template slot-scope="scope">
						{{scope.row.noticeTitle }}
					</template>
				</el-table-column>
				<!-- <el-table-column prop="noticeType" label="公告类型">
					<template slot-scope="scope">
						{{scope.row.noticeType | formatType}}
					</template>
				</el-table-column> -->
				<el-table-column prop="noticeContent" label="内容" align="center">
					<template slot-scope="scope">
						{{scope.row.noticeContent }}
					</template>
				</el-table-column>
				<el-table-column prop="noticeContent" label="会员" align="center">
					<template slot-scope="scope">
						<el-button size="mini" @click="handleMemberPreview(scope.$index, scope.row)">会员详情</el-button>
					</template>
				</el-table-column>
				<!-- <el-table-column label="状态" align="center">
					<template slot-scope="scope">
						<el-switch @change="handleShowChange(scope.$index, scope.row)" :active-value="1" :inactive-value="0" v-model="scope.row.status">
						</el-switch>
					</template>
				</el-table-column> -->
				<el-table-column prop="createTime" label="创建时间" align="center">
					<template slot-scope="scope">
						{{scope.row.createTime | formatCreateTime}}
					</template>
				</el-table-column>


				<el-table-column label="操作" align="center">
					<template slot-scope="scope">
						<!-- <el-button size="mini" @click="handleUpdate(scope.$index, scope.row)">编辑
						</el-button> -->
						<el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除
						</el-button>
					</template>
				</el-table-column>
			</el-table>
		</div>
		<div class="batch-operate-container">

		</div>
		<div class="pagination-container">
			<el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" layout="total, sizes,prev, pager, next,jumper"
			 :page-size="listQuery.pageSize" :page-sizes="[10,15,50]" :current-page.sync="listQuery.pageNum" :total="total">
			</el-pagination>
		</div>

		<!-- 会员-查看详情对话框 -->
		<el-dialog :title="memberTitle" :visible.sync="memberOpen" width="550px" append-to-body>
			<el-table v-loading="loading" :data="memberList" style="width: 100%" height="300" @selection-change="handleSelectionChange">
				<el-table-column fixed label="会员昵称" align="center" prop="centerJifen.nickName" width="200" />
				<el-table-column label="手机号" align="center" prop="centerJifen.phone" width="150" />
				<el-table-column label="会员等级" align="center" prop="centerLevel.level" width="150" />
			</el-table>
			<div slot="footer" class="dialog-footer">
				<el-button type="primary" @click="cancel">关闭</el-button>
			</div>
		</el-dialog>
	</div>
</template>
<script>
	//将$都替换为$
	import {
		fetchList,
		deleteAdminSysNotice,
		updateShowStatus,
	} from '@/api/sys/adminSysNotice';
	import {
		formatDate
	} from '@/utils/date';
	import {
		getMemberList
	} from '@/api/centers/message';

	export default {
		name: 'adminSysNoticeList',
		data() {
			return {
				operates: [],
				operateType: null,
				listQuery: {
					keyword: null,
					pageNum: 1,
					pageSize: 10
				},
				list: null,
				total: null,
				listLoading: true,
				multipleSelection: [],
				memberList: [],
				//会员-查看详情
				loading: false,
				memberTitle: "",
				memberOpen: false,
			}
		},
		created() {
			this.getList();
		},
		filters: {
			formatCreateTime(time) {
				let date = new Date(time);
				return formatDate(date, 'yyyy-MM-dd hh:mm:ss')
			},

			formatStatus(value) {
				if (value === 1) {
					return '未开始';
				} else if (value === 2) {
					return '活动中';
				} else if (value === 3) {
					return '已结束';
				} else if (value === 4) {
					return '已失效';
				}
			},
			formatType(value) {
				if (value === 1) {
					return '通知';
				} else if (value === 2) {
					return '公告';
				}
			},

		},
		methods: {
			getList() {
				this.listLoading = true;
				fetchList(this.listQuery).then(response => {
					this.listLoading = false;
					this.list = response.data.records;
					this.total = response.data.total;
					this.totalPage = response.data.pages;
					this.pageSize = response.data.size;
				});

			},
			handleShowChange(index, row) {
				let params = new URLSearchParams();
				params.append('ids', row.noticeId);
				params.append('showStatus', row.status);
				updateShowStatus(params).then(response => {
					this.$message({
						message: '修改成功',
						type: 'success',
						duration: 1000
					});
				});
			},
			handleSelectionChange(val) {
				this.multipleSelection = val;
			},
			handleUpdate(index, row) {
				this.$router.push({
					path: '/sys/updateAdminSysNotice',
					query: {
						id: row.noticeId
					}
				})
			},
			handleDelete(index, row) {
				this.$confirm('是否要删除该站内信', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					deleteAdminSysNotice(row.noticeId).
					then(response => {
						this.$message({
							message: '删除成功',
							type: 'success',
							duration: 1000
						});
						this.getList();
					});

				});

			},


			handleSizeChange(val) {
				this.listQuery.pageNum = 1;
				this.listQuery.pageSize = val;
				this.getList();
			},
			handleCurrentChange(val) {
				this.listQuery.pageNum = val;
				this.getList();
			},
			searchAdminSysNoticeList() {
				this.listQuery.pageNum = 1;
				this.getList();
			},
			handleBatchOperate() {
				// console.log(this.multipleSelection);
				if (this.multipleSelection < 1) {
					this.$message({
						message: '请选择一条记录',
						type: 'warning',
						duration: 1000
					});
					return;
				}
				let showStatus = 0;
				if (this.operateType === 'showAdminSysNotice') {
					showStatus = 1;
				} else if (this.operateType === 'hideAdminSysNotice') {
					showStatus = 0;
				} else {
					this.$message({
						message: '请选择批量操作类型',
						type: 'warning',
						duration: 1000
					});
					return;
				}
				let ids = [];
				for (let i = 0; i < this.multipleSelection.length; i++) {
					ids.push(this.multipleSelection[i].id);
				}
				let data = new URLSearchParams();
				data.append("ids", ids);
				data.append("showStatus", showStatus);
				updateShowStatus(data).then(response => {
					this.getList();
					this.$message({
						message: '修改成功',
						type: 'success',
						duration: 1000
					});
				});
			},
			addAdminSysNotice() {
				//手动将router,改成$router
				this.$router.push({
					path: '/sys/addAdminSysNotice'
				})
			},
			/** 会员查看详情操作 */
			handleMemberPreview(index, row) {
				getMemberList(row.noticeId).then(response => {
					this.memberOpen = true;
					this.memberTitle = "查看会员详情";
					this.memberList = response.data;
				})
			},
			cancel() {
				this.memberOpen = false;
			},
		}
	}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>


</style>
